<!doctype html>
<html>
	<head>
	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
	<script src="lib/bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
	<style>
		html,body{
			margin:0;
			padding: 0;
		}
		#mycanvas_container{
			overflow: auto;
			text-align: center;
			height: 100%;
			position: relative;
			margin: auto;
			background-color: #eee;
		}
	</style>
	</head>
	<body>
		<div id="container" class="container text-left" style="max-width: 100%; max-height: 100%; overflow: hidden;">
			<div class="row" style="width: 100%; height:100%; overflow: hidden;">
			  <div class="col-2" style="height:100%; overflow:auto;">
				<ul class="list-group" id="tmpl_container">
					<li class="list-group-item"><img src="templates/1.jpeg" class="img-thumbnail" data-tmplid="1" alt="..."></li>
					<li class="list-group-item"><img src="templates/2.jpeg" class="img-thumbnail" data-tmplid="2" alt="..."></li>
					<li class="list-group-item"><img src="templates/3.jpeg" class="img-thumbnail" data-tmplid="3" alt="..."></li>
					<li class="list-group-item"><img src="templates/4.jpeg" class="img-thumbnail" data-tmplid="4" alt="..."></li>
				  </ul>
			  </div>
			  <div class="col-8" style="height:100%; overflow: hidden;">
				<div id="mycanvas_container" style="height:100%; overflow:auto;">
					<img id="btn_zoomin" src="images/zoom_in.png" style="position: fixed; left: 60%; bottom: 60px; z-index:100; transform:scale(0.6)" />
					<img id="btn_zoomout" src="images/zoom_out.png" style="position: fixed; left: 65%; bottom: 60px; z-index:100; transform:scale(0.6)" />
				</div>
			  </div>
			  <div class="col-2" style="height:100%; overflow:auto;">
				<img id="previewImg" width="200" />
			  </div>
			</div>
		  </div>
		
	</body>
	<script type="module">	
		import JEditor from "../dist/j-editor.esm.js";

		const container = document.getElementById('container');
		container.style.height = window.innerHeight + 'px';

		const editor = new JEditor('mycanvas_container', {
			width: 800,
			height: 600,
			resolution: 1,
			style: {
				paddingBackgroundColor: '#eee'
			}
		});

		// 大小改变后居中
		editor.on('resize', function(size) {        
			const scale  = Math.min(this.rootContainer.clientWidth / (this.width*1.2), this.rootContainer.clientHeight / (this.height*1.2));
			if(scale < 1 && scale < this.scaleSize.x) {
				this.scale(scale);
			}
			// 滚动到居中
			this.rootContainer.scrollTo(this.app.renderer.width/2-this.rootContainer.clientWidth/2, this.app.renderer.height/2-this.rootContainer.clientHeight/2)
		})

		//editor.scale(0.8);

		editor.fromJSON({"backgroundUrl":"https://jtcospublic.ciccten.com/public/image/bf.jpg","backgroundColor":"#fffffff","width":600,"height":800,"children":[{"x":300,"y":400,"width":100,"height":100,"url":"https://pixijs.com/assets/bunny.png","rotation":0,"type":"image","style":{}},{"x":300,"y":100,"width":461,"height":39,"text":"Basic text, 中文测试, complete","rotation":0,"type":"text","style":{"fontFamily":"Crosterian","dropShadow":true,"dropShadowAlpha":0.3,"dropShadowAngle":2.1,"dropShadowBlur":4,"dropShadowColor":"0xeeeeee","dropShadowDistance":10,"fill":["#ffffff"],"stroke":"#004620","fontSize":22,"fontWeight":"lighter","lineJoin":"round","strokeThickness":1}},{"x":400,"y":500,"width":400,"height":400,"url":"https://jtcospublic.ciccten.com/config-server/1703730310545220869/idcard_qrcode.png","rotation":1.0471975511965976,"type":"image","style":{}}]})

		// 加载模板
		async function loadTemplate(id) {
			const tmpl = await editor.loader.load(`templates/${id}.json`);
			editor.fromJSON(tmpl.data || tmpl);
		}

		// 模板点击
		document.getElementById('tmpl_container').addEventListener('click', function(e) {
			if(e.target.nodeName === 'IMG') {
				const idAttr = e.target.attributes['data-tmplid'];
				if(idAttr && idAttr.value) {
					loadTemplate(idAttr.value);
				}
			}
		});
		editor.background.url = 'https://jtcospublic.ciccten.com/public/image/bf.jpg';
/*
		const img = editor.createImage('https://pixijs.com/assets/bunny.png');
		img.width = 100;
		img.height = 100;

		img.on('load', () => {
			//img.resize(100, 100);
			
			img.x = editor.width / 2;
			img.y = editor.height / 2;

			const img2 = editor.createImage();
			//img2.width = 200;
			//img2.height = 200;

			img2.url = 'https://jtcospublic.ciccten.com/config-server/1703730310545220869/idcard_qrcode.png';

			img2.x = img.x + 100;
			img2.y = img.y + 100;
			img2.angle = 60;
			editor.addChild(img2);
		});
		editor.addChild(img);

		

		const txt1 = editor.createShape('text', {
			text: 'Basic text, 中文测试',
			style: {
				fontFamily: 'Crosterian'
			}
		});
		editor.addChild(txt1);
		txt1.x = 300;
		txt1.y = 100;*/

		editor.loader.loadFont({
			"zcool-kuaile-regular": 'fonts/zcool-kuaile-regular.woff2',
		}, (e) => {
			console.log('load fonts', e);
		}).then(()=>{
			
			const v = editor.loader.assets.get("zcool-kuaile-regular");
			console.log('load fonts completed', v);
		});

		const preview = document.getElementById('previewImg');
		async function createPreivew(delta) {
			const data = await editor.toImage();
			if(data !== preview.src) preview.src = data;
			setTimeout(createPreivew, 5000);

			const json = editor.toString();
			//console.log(json);
		};
		setTimeout(createPreivew, 1000);

		// 放大缩小
		document.getElementById('btn_zoomin').onclick = function(){
			editor.scale(editor.scaleSize.x + 0.1);
		}
		document.getElementById('btn_zoomout').onclick = function(){			
			editor.scale(editor.scaleSize.x - 0.1);
		}

		// 调整大小
		window.onresize = function() {
			editor.resize();
		}

		
	</script>

</html>